<!-- 总部级别 -->
<template>
  <div class="background">
    <titleComponent :originName="'headquarters'" :title="'服务区数字化管理平台'"></titleComponent>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
              @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item, index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{ item.name }}</div>
              <div v-else class="yz-box-item-text">{{ item.name }}</div>
            </div>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item, index) in dmyItems" @click="dmyClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{ item.name }}</div>
              <div v-else class="yz-box-item-text">{{ item.name }}</div>
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'今日车客流'" />
          <div class="yz-content-bg">
            <div class="ckl">
              <div class="ckl-item">
                <div class="ckl-flex-between">
                  <div class="ckl-title">
                    <div class="ckl-title-p1">总车流</div>
                    <div class="ckl-title-p2">{{ (state.jrcklxx.zcl).toFixed(2) }}万次</div>
                  </div>
                  <div class="ckl-echarts" style="height: 60px;width: 60px">
                    <div ref="ckl1Ref" style="height: 60px"></div>
                  </div>
                </div>
                <div class="ckl-bottom">
                  <div class="ckl-bottom-key">昨日车流：</div>
                  <div class="ckl-bottom-value">{{ (state.jrcklxx.zrcl).toFixed(2) }}万次</div>
                </div>
              </div>
              <div class="ckl-item">
                <div class="ckl-flex-between">
                  <div class="ckl-title">
                    <div class="ckl-title-p1">总客流</div>
                    <div class="ckl-title-p2">{{ (state.jrcklxx.zcl * 3).toFixed(2) }}万次</div>
                  </div>
                  <div class="ckl-echarts" style="height: 60px;width: 60px">
                    <div ref="ckl2Ref" style="height: 60px"></div>
                  </div>
                </div>
                <div class="ckl-bottom">
                  <div class="ckl-bottom-key">昨日客流：</div>
                  <div class="ckl-bottom-value">{{ (state.jrcklxx.zrcl * 3).toFixed(2) }}万次</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'年度车客流'" />
          <div class="yz-content-bg">
            <div class="chart" ref="ndcklRef"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'业态销售趋势'" />
          <div class="yz-content-bg">
            <div class="yz-common-small-title yz-common-small-title2">
              <div class="yz-common-title-navs top3" style="justify-content: flex-end;width: 100%;">
                <div :class="['yz-common-title-nav', 'md-4', { 'selected': item.selected }]" :style="{'width': item.name.length>2 ? '6vh':'4vh'}"
                  v-for="(item, index) in ytxsqs_navs" @click="ytxsqsClick(item.type)">
                  <span class="nav-title">{{ item.name }}</span>
                  <span v-if="index < ytxsqs_navs.length - 1" class="rightLine">|</span>
                </div>
              </div>
              <div class="yz-common-title-navs top3">
                <div :class="['yz-common-title-nav','md-4', { 'selected': item.selected }]"
                  v-for="(item, index) in ytsxqs_navs_child" @click="ytxsqsChildClick(item.type)">
                  <span class="nav-title">{{ item.name }}</span>
                  <span v-if="index < ytsxqs_navs_child.length - 1" class="rightLine">|</span>
                </div>
              </div>
            </div>
            <div ref="ytxsqsRef" class="chart"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow numbg">
            <div class="car_flow_text">总销售</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item, index) in currentZongxiaoshouOptionsOptions.num">
                <div v-if="isNumeric(item)">
                  <!-- 有背景图，然后把数字拆分  -->
                  <countTo :startVal='0' :endVal='item || 0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">万元</div>
            <div class="thb thb-header">
              <div :class="state.xsxx.tongbi.zxs.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.zxs }}</span></div>
              <div :class="state.xsxx.huanbi.zxs.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.zxs }}</span></div>
            </div>
          </div>
        </div>
        <div class="yz-box2-items xk">
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.yz }}</div>
            <div class="yz-box2-p center">油站</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.yz.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.yz }}</span></div>
              <div :class="state.xsxx.huanbi.yz.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.yz }}</span></div>
            </div>
          </div>
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.jq }}</div>
            <div class="yz-box2-p center">加气</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.jq.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.jq }}</span></div>
              <div :class="state.xsxx.huanbi.jq.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.jq }}</span></div>
            </div>
          </div>
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.cd }}</div>
            <div class="yz-box2-p center">充电</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.cd.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.cd }}</span></div>
              <div :class="state.xsxx.huanbi.cd.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.cd }}</span></div>
            </div>
          </div>
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.sc }}</div>
            <div class="yz-box2-p center">商超</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.sc.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.sc }}</span></div>
              <div :class="state.xsxx.huanbi.sc.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.sc }}</span></div>
            </div>
          </div>
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.cy }}</div>
            <div class="yz-box2-p center">餐饮</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.cy.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.cy }}</span></div>
              <div :class="state.xsxx.huanbi.cy.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.cy }}</span></div>
            </div>
          </div>
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.kf }}</div>
            <div class="yz-box2-p center">客房</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.kf.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.kf }}</span></div>
              <div :class="state.xsxx.huanbi.kf.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.kf }}</span></div>
            </div>
          </div>
          <div class="yz-box2-item" style="width: 14%">
            <div class="yz-box2-p">{{ state.xsxx.wysh }}</div>
            <div class="yz-box2-p center">物业商户</div>
            <div class="thb">
              <div :class="state.xsxx.tongbi.wysh.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">同比</div><span>{{ state.xsxx.tongbi.wysh }}</span></div>
              <div :class="state.xsxx.huanbi.wysh.startsWith('+') ? 'thb-tb' : 'thb-hb'"><div class="thb-w">环比</div><span>{{ state.xsxx.huanbi.wysh }}</span></div>
            </div>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-headquarters :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler"></Map-headquarters>
        <!-- 下面legend -->
        <div class="map-legend">
          <div class="map-legend-item" title="销售排行第1名">
            <el-image :src="top1"></el-image>
            <span>第1名</span>
          </div>
          <div class="map-legend-item" title="销售排行第2名">
            <el-image :src="top2"></el-image>
            <span>第2名</span>
          </div>
          <div class="map-legend-item" title="销售排行第3名">
            <el-image :src="top3"></el-image>
            <span>第3名</span>
          </div>
          <div class="map-legend-item" title="销售排行第4名">
            <el-image :src="top4"></el-image>
            <span>第4名</span>
          </div>
          <div class="map-legend-item" title="销售排行第5名">
            <el-image :src="top5"></el-image>
            <span>第5名</span>
          </div>
          <div class="map-legend-item" title="销售排行第6-10名">
            <el-image :src="mapTop3_10Icon"></el-image>
            <span>第6-10名</span>
          </div>
          <div class="map-legend-item" title="">
            <el-image :src="mapOtherIcon"></el-image>
            <span>其他</span>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="content_info">
        <div class="yz-box2-items" style="justify-content: flex-end;">
          <div class="yz-box2-item2">
            <div class="yz-box2-p">{{ state.ratioData.kehuobi }}</div>
            <div class="yz-box2-p center">客货比</div>
          </div>
          <div class="yz-box2-item2">
            <div class="yz-box2-p">{{ state.ratioData.ruqulv }}</div>
            <div class="yz-box2-p center">入区率</div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'今日服务质量跟踪'" />
          <div class="yz-content-bg">
            <div class="echart_content">
              <div class="layui-col-xs6">
                <div ref="jrfwzlgzRef1" style="width:220px;height: 150px;padding-top: 18px;"></div>
                <div class="yz-cloumn">
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #95CA45;"></div>
                      <div class="minText">合格</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ hegeValue }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #0091FF;"></div>
                      <div class="minText">不合格</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ buhegeValue }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #44D7B6;"></div>
                      <div class="minText">未完成</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ weiwcValue }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-xs6">
                <div ref="jrfwzlgzRef2" style="width:220px;height: 150px;padding-top: 18px;"></div>
                <div class="yz-cloumn">
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #34BAC6;">
                        <div style="width: 55%;background: #FB4D8F;height: 10px;"></div>
                      </div>
                      <div class="minText">不合格</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ buhegeValue2 }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #FB4D8F"></div>
                      <div class="minText">未整改</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ wzgValue2 }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #34BAC6;"></div>
                      <div class="minText">已整改</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ yzgValue2 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'年度水电费用'" />
          <div class="yz-content-bg">
            <div ref="ndsdfyRef" class="chart"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'年度费用'" />
          <div class="yz-content-bg">
            <div class="chart" ref="ndfyRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <bottom-menu></bottom-menu>
</template>
<script setup>
import './../assets/content.css'
import './../assets/common.css'
import titleComponent from "./components/title.vue";
import {
  getCurrentInstance,
  onMounted,
  reactive,
  ref
} from "vue";
import ContentTitle from "./components/contentTitle.vue";
import {
  CountTo
} from "vue3-count-to";
import MapHeadquarters from "./components/mapHeadquarters.vue";
import mapTop3_10Icon from '../assets/img/headquarters/top3-10.png';
import mapOtherIcon from '../assets/img/headquarters/其它.png';
import top1 from "../assets/img/headquarters/top1.png";
import top2 from "../assets/img/headquarters/top2.png";
import top3 from "../assets/img/headquarters/top3.png";
import top4 from "../assets/img/headquarters/top4.png";
import top5 from "../assets/img/headquarters/top5.png";
import top6 from "../assets/img/headquarters/top6.png";
import top7 from "../assets/img/headquarters/top7.png";
import top8 from "../assets/img/headquarters/top8.png";
import top9 from "../assets/img/headquarters/top9.png";
import top10 from "../assets/img/headquarters/top10.png";
import bottomMenu from './components/bottomMenu.vue';
import {
  drawLine
} from "../util/chartUtil.js";
import {
  ajaxRequest
} from "../api/code.js";

const state = reactive({
  xsxx: {
    zxs: 0,
    yz: 0,
    jq: 0,
    cd: 0,
    sc: 0,
    cy: 0,
    kf: 0,
    wysh: 0,
    tongbi:{
      zxs: "0%",
      yz: "0%",
      jq: "0%",
      cd: "0%",
      sc: "0%",
      cy: "0%",
      kf: "0%",
      wysh: "0%",
    },
    huanbi:{
      zxs: "0%",
      yz: "0%",
      jq: "0%",
      cd: "0%",
      sc: "0%",
      cy: "0%",
      kf: "0%",
      wysh: "0%",
    },
  },
  jrcklxx: {
    zcl: 0,
    zrcl: 0,
    tbzzl: 0
  },
  ratioData: {
    kehuobi: "0:0",
    ruqulv: "0%",
    ruqulv_tb: "0"
  },
})



const chart = getCurrentInstance().proxy.$echarts
const isNumeric = function (value) {
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}

/* 中间营收统计 */
const currentZongxiaoshouOptionsOptions = ref({
  position: 0,
  num: "0"
})

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])
const curServer = ref("")
//选中服务区
const serverHandleChange = (selectItem) => {
  curServer.value = selectItem ?? ['',''];
  refreshData();
}

//ab选择
const abItems = ref([{
  name:"综合",
  selected: true
},{
  name:"东(南)",
  selected: false
},{
  name:"西(北)",
  selected: false
}]);

const areaid = ref(null)
const areacode = ref(null) // 初始化地图数据
const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0) {
    areaid.value = null
    areacode.value = null
  } else if (selectIndex === 1) {
    areaid.value = 1177350;
    areacode.value = '01'
  } else if (selectIndex === 2) {
    areaid.value = 1177351;
    areacode.value = '02'
  }
  //切换分区刷新数据
  refreshData()
}

const dmyItems = ref([{
  name: "年",
  selected: false
}, {
  name: "月",
  selected: false
}, {
  name: "日",
  selected: true
}]);
const dmyType = ref('day')
const dmyClick = function (selectIndex) {
  dmyItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0) {
    dmyType.value = 'year'
  } else if (selectIndex === 1) {
    dmyType.value = 'month'
  } else if (selectIndex === 2) {
    dmyType.value = 'day'
  }
  //切换刷新数据
  getXsxx()
  getLeft3Data()
  initMap()
  getKehuobi()
}

const ckl1Ref = ref();
//车客流
const ckl1Op = ref({
  tooltip: {
    show: false,
  },
  series: [{
    type: 'pie',
    radius: ['75%', '90%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    z: 10,
    label: {
      position: 'center',
      formatter: () => {
        // return (state.jrcklxx.tbzzl * 100).toFixed(0) + "%"
        return '';
      },
      rich: {
        total: {
          fontSize: 20,
          color: '#fff',
        },
      },
      color: '#0DBBB3',
      fontSize: 10,
      lineHeight: 30,
    },
    data: [{
      value: (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
      },
    },
    {
      value: 100 - (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
      },
    }
    ],
    labelLine: {
      show: false,
    },
  },
  {
    type: 'pie',
    radius: ['54%', '74%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    label: {
      show: false,
    },
    data: [{
      value: (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
        opacity: 0.4,
      },
    },
    {
      value: 100 - (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
        opacity: 0.4,
      },
    }
    ],
    labelLine: {
      show: false,
    },
  }
  ],
})

const ckl2Ref = ref();
//车客流
const ckl2Op = ref({
  tooltip: {
    show: false,
  },
  series: [{
    type: 'pie',
    radius: ['75%', '90%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    z: 10,
    label: {
      position: 'center',
      formatter: () => {
        // return (state.jrcklxx.tbzzl * 100).toFixed(0) + "%"
        return '';
      },
      rich: {
        total: {
          fontSize: 20,
          color: '#fff',
        },
      },
      color: '#0DBBB3',
      fontSize: 10,
      lineHeight: 30,
    },
    data: [{
      value: (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
      },
    },
    {
      value: 100 - (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
      },
    }
    ],
    labelLine: {
      show: false,
    },
  },
  {
    type: 'pie',
    radius: ['54%', '74%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    label: {
      show: false,
    },
    data: [{
      value: (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
        opacity: 0.4,
      },
    },
    {
      value: 100 - (state.jrcklxx.tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
        opacity: 0.4,
      },
    }
    ],
    labelLine: {
      show: false,
    },
  }
  ],
})

//年度水电费用start
const ndsdfyRef = ref();
const ndsdfyXAxis = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']);
const ndsdfyData1 = ref([]);
const ndsdfyData2 = ref([]);
const ndsdfyData3 = ref([]);
const ndsdfyData4 = ref([]);
ndsdfyXAxis.value.forEach(a => {
  ndsdfyData1.value.push(parseInt(Math.random() * 100000 + 1));
})
ndsdfyXAxis.value.forEach(a => {
  ndsdfyData2.value.push(parseInt(Math.random() * 100000 + 1));
})

const ndsdfyOp = ref({
  legend: {
    data: ['上年用水', '上年用电','本年用水', '本年用电'],
    right: "20",
    top: "18",
    icon: "rect",
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {
      color: '#FFFFFF'
    }
  },
  tooltip: {
    trigger: 'axis',
    showDelay: 1,
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
    borderWidth: 0,
    textStyle: {
      fontWeight: 'normal',
      fontSize: 13
    },
    padding: [10, 15],
    formatter: function (param) {
      console.log(param)
      var text = param[0].axisValueLabel;
      param.forEach(item => {
        if (item.seriesName && item.value) {
          text += "<br>"+item.seriesName+"：" + item.value+"万元"
        }
      })
      return text;
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(193,228,255,0.31)'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#FFF',
      fontSize: 10
    },
    data: ndsdfyXAxis.value
  },
  yAxis: [
    {
      type: 'value',
      name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    },
    {
      type: 'value',
      // name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        show:false,
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
  // 中间的长方形柱状图(柱状图):bar
  {
    type: 'bar', // 柱状图
    name: '本年用水',
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      borderRadius: [10, 10, 0, 0], // 这里设置圆角
      color: {
        "x": 0,
        "y": 0,
        "x2": 0,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
          "offset": 0, // 0%处的颜色
          "color": "#34bac6"
        }, {
          "offset": 1, // 100%处的颜色
          "color": "#72d1d2"
        }]
      }
    },
    data: ndsdfyData1.value,
  },
  // 中间的长方形柱状图(柱状图):bar
  {
    // type: 'bar', // 柱状图
    type: 'line',
    yAxisIndex: 1,
    smooth: true,
    name: '本年用电',
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      color: {
        "x": 0,
        "y": 0,
        "x2": 0,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
          "offset": 0, // 0%处的颜色
          "color": "#0091FF"
        }, {
          "offset": 1, // 100%处的颜色
          "color": "#72d1d2"
        }]
      }
    },
    data: ndsdfyData2.value,
  },

/*******************上一年**************************** */
  // 中间的长方形柱状图(柱状图):bar
  {
    type: 'bar', // 柱状图
    name: '上年用水',
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      borderRadius: [10, 10, 0, 0], // 这里设置圆角
      color: "#95CA45"
    },
    data: ndsdfyData3.value,
  },
  // 中间的长方形柱状图(柱状图):bar
  {
    type: 'line',
    yAxisIndex: 1,
    smooth: true,
    name: '上年用电',
    barWidth: 10, // 柱条的宽度,不设时自适应
    itemStyle: {
      color: "#44D7B6"
    },
    data: ndsdfyData4.value,
  },
  ]
});


//年度水电费用end

//业态销售趋势
//0=零售(超市) 1=餐饮 2=汽修 3=油站 4=客房 5=充电 6=物业 8=加气 9=其它
const ytxsqs_navs = ref([{
  type: null,
  name: '全部',
  selected: true
},
{
  type: 3,
  name: '油站',
  selected: false
}, {
  type: 8,
  name: '加气',
  selected: false
},
{
  type: 5,
  name: '充电',
  selected: false
}, {
  type: 0,
  name: '商超',
  selected: false
},
{
  type: 1,
  name: '餐饮',
  selected: false
}, {
  type: 4,
  name: '客房',
  selected: false
}, {
  type: 6,
  name: '物业商户',
  selected: false
}
])
//0-非自营  1-自营
const ytsxqs_navs_child = ref([{
  type: null,
  name: '全部',
  selected: true
}, {
  type: 0,
  name: '非自营',
  selected: false
}, {
  type: 1,
  name: '自营',
  selected: false
}])

const ytxsqs_modetype = ref(null);
const ytxsqs_modetype_child = ref(null);
const ytxsqsClick = function (selectIndex) {
  console.log(selectIndex)
  ytxsqs_modetype.value = selectIndex
  ytxsqs_navs.value.forEach((row, index) => {
    row.selected = (row.type === selectIndex);
  });
  //刷新
  getLeft3Data()
}
const ytxsqsChildClick = function (selectIndex) {
  ytxsqs_modetype_child.value = selectIndex
  console.log(selectIndex)
  ytsxqs_navs_child.value.forEach((row, index) => {
    row.selected = (row.type === selectIndex);
  });
  //刷新
  getLeft3Data()
}


const ytxsqsRef = ref();
const ytxsqs_x = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']);
const ytxsqs_y = ref([]);
ytxsqs_x.value.forEach(a => {
  ytxsqs_y.value.push(parseInt(Math.random() * 100000 + 1));
})
let ytxsqsOpt = ref({
  color: ['#02a6e4'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '35%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: ytxsqs_x.value,
    axisLine: {
      lineStyle: {
        color: '#c1e4ff'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#FFF',
      fontSize: 10
    },
  }],
  yAxis: [{
    type: 'value',
    name: "万元",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding: [0, 0, 0, -15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
  }],
  series: [{
    name: '业态',
    type: 'line',
    stack: 'Total',
    smooth: true,
    lineStyle: {
      width: 4
    },
    showSymbol: true,
    emphasis: {
      focus: 'series'
    },
    data: ytxsqs_y.value
  }]
});
//业态销售趋势

//今日服务质量跟踪START
const ywcValue = ref(1428); //已完成
const hegeValue = ref(1024); //合格
const buhegeValue = ref(800); //不合格
const weiwcValue = ref(200); //未完成
const zrwValue = ref(hegeValue.value + buhegeValue.value + weiwcValue.value); //总任务

const jrfwzlgzRef1 = ref();
const getJrfwzlgzOp1 = function () {
  const jrfwzlgzOp1 = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        console.log(params)
        let value = 0;
        if (params.seriesIndex === 0) {
          value = hegeValue.value;
        } else if (params.seriesIndex === 1) {
          value = buhegeValue.value;
        } else if (params.seriesIndex === 2) {
          value = weiwcValue.value;
        }
        return `${params.seriesName}:${value}`;
      }
    },
    angleAxis: {
      show: false,
      max: zrwValue.value,
      type: 'value',
      startAngle: 180, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 15, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '50%'],
      radius: '115'
    },
    series: [{
      name: '合格',
      type: 'bar',
      data: [{ //上层圆环，显示数据
        value: hegeValue.value,
        itemStyle: {
          color: '#95CA45',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    }, {
      name: '不合格',
      type: 'bar',
      data: [{ //上层圆环，显示数据
        value: hegeValue.value + buhegeValue.value,
        itemStyle: {
          color: '#0091FF',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 2 //圆环层级，同zindex
    },
    { //下层圆环，显示最大值
      name: '未完成',
      type: 'bar',
      data: [{
        value: zrwValue.value,
        itemStyle: {
          color: '#44D7B6',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#FF5652'
      },
      detail: {
        show: false,
      },
      title: {
        show: false
      },
      data: [{}]
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#70D5FF'
      },
      detail: {
        formatter: function (params) {
          return '{a|' + ywcValue.value + '}\n{b|已完成}\n{c|总任务数 } {d|' + zrwValue.value + '}';

        },
        textStyle: {
          rich: {
            a: {
              fontSize: 24,
              color: '#fff',
              fontWeight: 'bold',
              lineHeight: 10
            },
            b: {
              fontSize: 14,
              color: '#fff',
              lineHeight: 40
            },
            c: {
              fontSize: 12,
              color: '#fff',

            },
            d: {
              fontSize: 12,
              color: '#1F85F5'
            }
          }
        },
        offsetCenter: [0, 14],
      },
      title: {
        show: false
      },
      data: [{
        value: ywcValue.value * 100 / zrwValue.value
      }]
    }
    ]
  }
  return jrfwzlgzOp1
}


const jrfwzlgzRef2 = ref();
const wzgValue2 = ref(1424); //未整改
const yzgValue2 = ref(1000); //已整改
const buhegeValue2 = ref(wzgValue2.value + yzgValue2.value); //不合格数量

const getJrfwzlgzOp2 = function () {
  const jrfwzlgzOp2 = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        let value = 0;
        if (params.seriesIndex === 0) {
          value = wzgValue2.value;
        } else if (params.seriesIndex === 1) {
          value = yzgValue2.value;
        }
        return `${params.seriesName}: ${value}`;
      }
    },
    grid: {
      top: '20%',
      containLabel: true,
    },
    angleAxis: {
      show: false,
      max: buhegeValue2.value,
      type: 'value',
      startAngle: 180, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 15, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '50%'],
      radius: '110'
    },
    series: [{
      type: 'bar',
      name: '未整改',
      data: [{ //上层圆环，显示数据
        value: wzgValue2,
        itemStyle: {
          color: '#FB4D8F',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    },
    { //下层圆环，显示最大值
      type: 'bar',
      name: '已整改',
      data: [{
        value: buhegeValue2.value,
        itemStyle: {
          color: '#34BAC6',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#70D5FF'
      },
      detail: {
        formatter: function (params) {
          return '{a|' + yzgValue2.value + '}\n{b|已整改}\n{c|不合格明细 } {d|' + buhegeValue2.value + '}';

        },
        textStyle: {
          rich: {
            a: {
              fontSize: 24,
              color: '#FFF',
              fontWeight: 'bold',
              lineHeight: 10
            },
            b: {
              fontSize: 14,
              color: '#FFF',
              lineHeight: 40
            },
            c: {
              fontSize: 12,
              color: '#FFF',

            },
            d: {
              fontSize: 12,
              color: '#1F85F5'
            }
          }
        },
        offsetCenter: [0, 14],
      },
      title: {
        show: false
      },
      data: [{
        value: yzgValue2 * 100 / buhegeValue2.value
      }]
    }
    ]
  }
  return jrfwzlgzOp2
}

//今日服务质量跟踪END


//年度车客流
const ndckl_x = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']);
const ndckl_y_1 = ref([]);
const ndckl_y_2 = ref([]);
ndckl_x.value.forEach(a => {
  ndckl_y_1.value.push(parseInt(Math.random() * 100000 + 1));
  ndckl_y_2.value.push(parseInt(Math.random() * 100000 + 1));
})
const ndcklRef = ref();
const ndcklOpt = ref({
  color: ['#34BAC6', '#0091FF'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
  },
  legend: {
    data: ['车流', '客流'],
    right: "20",
    top: "18",
    icon: "rect",
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {
      color: '#FFF'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: ndckl_x.value,
    axisLine: {
      lineStyle: {
        color: '#c1e4ff'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#FFF',
      fontSize: 10
    },
  }],
  yAxis: [{
    type: 'value',
    name: "万次",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding: [0, 0, 0, -15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
  }],
  series: [{
    name: '车流',
    type: 'line',
    // stack: 'Total',
    smooth: true,
    lineStyle: {
      width: 3
    },
    showSymbol: true,
    areaStyle: {
      opacity: 0.8,
      color: new chart.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: '#05EDDB'
      },
      {
        offset: 1,
        color: 'rgba(0,145,255,0.00)'
      }
      ])
    },
    emphasis: {
      focus: 'series'
    },
    data: ndckl_y_1.value
  },
  {
    name: '客流',
    type: 'line',
    // stack: 'Total',
    smooth: true,
    lineStyle: {
      width: 3
    },
    showSymbol: true,
    areaStyle: {
      opacity: 0.8,
      color: new chart.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: '#00C4FF'
      },
      {
        offset: 1,
        color: 'rgba(0,145,255,0.00)'
      }
      ])
    },
    emphasis: {
      focus: 'series'
    },
    data: ndckl_y_2.value
  }
  ]
})


//年度费用
const ndfy_x = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'])
const ndfy_y = ref([140, 123, 123, 212, 126, 211, 140, 123, 123, 212, 126, 211])
const ndfy_y_sn = ref([140, 123, 123, 212, 126, 211, 140, 123, 123, 212, 126, 211])

const ndfyRef = ref();
const ndfyOpt = ref({
  grid: {
    top: '18%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  legend: {
    data: ['上年', '本年'],
    right: "20",
    top: "18",
    icon: "rect",
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {
      color: '#FFFFFF'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0,
      rotate: 25,
      textStyle: {
        color: 'white',
        fontSize: 10
      }
    },
    data: ndfy_x.value
  },
  yAxis: {
    type: 'value',
    name: "万元",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding: [0, 0, 0, -15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [{
    name:"本年",
    data: ndfy_y.value,
    type: 'bar',
    barWidth: 10,
    itemStyle: {
      borderRadius: [10, 10, 0, 0], // 这里设置圆角
      color: new chart.graphic.LinearGradient(
        0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
        [{
          offset: 0,
          color: '#50E4DF'
        }, // 0% 处的颜色
        {
          offset: 1,
          color: 'rgba(136,243,241,0)'
        } // 100% 处的颜色
        ]
      )
    }
  },
    {
      name:"上年",
    data: ndfy_y.value,
    type: 'bar',
    barWidth: 10,
    itemStyle: {
      borderRadius: [10, 10, 0, 0], // 这里设置圆角
      color: new chart.graphic.LinearGradient(
        0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
        [{
          offset: 0,
          color: '#e371a9'
        }, // 0% 处的颜色
        {
          offset: 1,
          "color": "#d52a7e"
        } // 100% 处的颜色
        ]
      )
    }
  }

  ]
});


let ckl1OpChart,ckl2OpChart, ndsdfyOpChart, ytxsqsOptChart, jrfwzlgzOp1Chart, jrfwzlgzOp2Chart, ndcklOptChart, ndfyOptChart
onMounted(() => {
  ckl1OpChart = drawLine(ckl1Ref.value, ckl1Op.value)
  ckl2OpChart = drawLine(ckl2Ref.value, ckl2Op.value)
  ndsdfyOpChart = drawLine(ndsdfyRef.value, ndsdfyOp.value)
  ytxsqsOptChart = drawLine(ytxsqsRef.value, ytxsqsOpt.value)
  ndcklOptChart = drawLine(ndcklRef.value, ndcklOpt.value)
  ndfyOptChart = drawLine(ndfyRef.value, ndfyOpt.value)
  jrfwzlgzOp1Chart = drawLine(jrfwzlgzRef1.value, getJrfwzlgzOp1())
  jrfwzlgzOp2Chart = drawLine(jrfwzlgzRef2.value, getJrfwzlgzOp2())
  initMap()
  getFwqxx()
  refreshData()
})

let timer = null
const refreshData = () => {
  getXsxx()
  getKehuobi()
  getLeft1Data()
  getLeft2Data()
  getLeft3Data()
  getRigth1Data()
  getRigth2Data()
  getRigth3Data()
  if (timer) {
    clearInterval(timer)
  }
  autoRefreshData()
}

// xx分钟刷新
const autoRefreshData = () => {
  timer = setInterval(async () => {
    //当日数据时，自动刷新
    if("day" === dmyType.value){
      getLeft1Data()
    }
  }, 60*1000)
}
/**
 * 获取销售信息
 */
async function getXsxx() {
  state.xsxx.huanbi.zxs = "0.00%"
  state.xsxx.huanbi.yz = "0.00%"
  state.xsxx.huanbi.jq = "0.00%"
  state.xsxx.huanbi.cd = "0.00%"
  state.xsxx.huanbi.sc = "0.00%"
  state.xsxx.huanbi.cy = "0.00%"
  state.xsxx.huanbi.kf = "0.00%"
  state.xsxx.huanbi.wysh = "0.00%"

  state.xsxx.tongbi.zxs = "0.00%"
  state.xsxx.tongbi.yz = "0.00%"
  state.xsxx.tongbi.jq = "0.00%"
  state.xsxx.tongbi.cd = "0.00%"
  state.xsxx.tongbi.sc = "0.00%"
  state.xsxx.tongbi.cy = "0.00%"
  state.xsxx.tongbi.kf = "0.00%"
  state.xsxx.tongbi.wysh = "0.00%"
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value,
    validatecode: dmyType.value
  }
  const res = await ajaxRequest('post', 'getXsxxZhkb', params)
  if (res.data) {
    //总数
    // currentZongxiaoshouOptionsOptions.value.num = res.data.zxs_by ? (res.data.zxs_by/10000).toFixed(2)+"" : "0"
    state.xsxx.yz = (res.data.yzxs_by/10000).toFixed(2);
    state.xsxx.jq = (res.data.jqxs_by/10000).toFixed(2);
    state.xsxx.cd = (res.data.cdxs_by/10000).toFixed(2);
    state.xsxx.sc = (res.data.csxs_by/10000).toFixed(2);
    state.xsxx.cy = (res.data.ctxs_by/10000).toFixed(2);
    state.xsxx.kf = (res.data.kfxs_by/10000).toFixed(2);
    state.xsxx.wysh = (res.data.wyxs_by / 10000).toFixed(2);
    currentZongxiaoshouOptionsOptions.value.num = (Number(state.xsxx.yz)+Number(state.xsxx.jq)+Number(state.xsxx.cd)+Number(state.xsxx.sc)+Number(state.xsxx.cy)+Number(state.xsxx.kf)+Number(state.xsxx.wysh)).toFixed(2)


    /******************************环比**************************************/
    //总销售
    if (res.data.zxs_hb) {
      let zxs_hbzzl = ((res.data.zxs_by - res.data.zxs_hb) / res.data.zxs_hb * 100).toFixed(2)
      //大于0的 加一个“+”
      state.xsxx.huanbi.zxs = zxs_hbzzl >= 0 ? "+" + zxs_hbzzl + "%" : zxs_hbzzl + "%"
    }
    
    //油站
    if (res.data.yzxs_hb) {
      let yzxs_hbzzl = ((res.data.yzxs_by - res.data.yzxs_hb) / res.data.yzxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.yz = yzxs_hbzzl >= 0 ? "+" + yzxs_hbzzl + "%" : yzxs_hbzzl + "%"
    }
    
    //加气
    if (res.data.jqxs_hb) {
      let jqxs_hbzzl = ((res.data.jqxs_by - res.data.jqxs_hb) / res.data.jqxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.jq = jqxs_hbzzl >= 0 ? "+" + jqxs_hbzzl + "%" : jqxs_hbzzl + "%"
    }

    //充电销售
    if (res.data.cdxs_hb) {
      let cdxs_hbzzl = ((res.data.cdxs_by - res.data.cdxs_hb) / res.data.cdxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.cd = cdxs_hbzzl >= 0 ? "+" + cdxs_hbzzl + "%" : cdxs_hbzzl + "%"
    }
    
    //商超，原来叫超市销售
    if (res.data.csxs_hb) {
      let csxs_hbzzl = ((res.data.csxs_by - res.data.csxs_hb) / res.data.csxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.sc = csxs_hbzzl >= 0 ? "+" + csxs_hbzzl + "%" : csxs_hbzzl + "%"
    }
    
    //餐饮，原来叫餐厅
    if (res.data.ctxs_hb) {
      let ctxs_hbzzl = ((res.data.ctxs_by - res.data.ctxs_hb) / res.data.ctxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.cy = ctxs_hbzzl >= 0 ? "+" + ctxs_hbzzl + "%" : ctxs_hbzzl + "%"
    }
    
    //客房
    if (res.data.kfxs_hb) {
      let kfxs_hbzzl = ((res.data.kfxs_by - res.data.kfxs_hb) / res.data.kfxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.kf = kfxs_hbzzl >= 0 ? "+" + kfxs_hbzzl + "%" : kfxs_hbzzl + "%"
    }
    
    //物业
    if (res.data.wyxs_hb) {
      let wyshxs_hbzzl = ((res.data.wyxs_by - res.data.wyxs_hb) / res.data.wyxs_hb * 100).toFixed(2)
      state.xsxx.huanbi.wysh = wyshxs_hbzzl >= 0 ? "+" + wyshxs_hbzzl + "%" : wyshxs_hbzzl + "%"
    }

    /******************************同比**************************************/
    
    //总销售
    if (res.data.zxs_tb) {
      let zxs_tbzzl = ((res.data.zxs_by - res.data.zxs_tb) / res.data.zxs_tb * 100).toFixed(2)
      //大于0的 加一个“+”
      state.xsxx.tongbi.zxs = zxs_tbzzl >= 0 ? "+" + zxs_tbzzl + "%" : zxs_tbzzl + "%"
    }
    
    //油站
    if (res.data.yzxs_tb) {
      let yzxs_tbzzl = ((res.data.yzxs_by - res.data.yzxs_tb) / res.data.yzxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.yz = yzxs_tbzzl >= 0 ? "+" + yzxs_tbzzl + "%" : yzxs_tbzzl + "%"
    }
    
    //加气
    if (res.data.jqxs_tb) {
      let jqxs_tbzzl = ((res.data.jqxs_by - res.data.jqxs_tb) / res.data.jqxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.jq = jqxs_tbzzl >= 0 ? "+" + jqxs_tbzzl + "%" : jqxs_tbzzl + "%"
    }
    
    //充电销售
    if (res.data.cdxs_tb) {
      let cdxs_tbzzl = ((res.data.cdxs_by - res.data.cdxs_tb) / res.data.cdxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.cd = cdxs_tbzzl >= 0 ? "+" + cdxs_tbzzl + "%" : cdxs_tbzzl + "%"
    }
    
    //商超，原来叫超市销售
    if (res.data.csxs_tb) {
      let csxs_tbzzl = ((res.data.csxs_by - res.data.csxs_tb) / res.data.csxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.sc = csxs_tbzzl >= 0 ? "+" + csxs_tbzzl + "%" : csxs_tbzzl + "%"
    }
    
    //餐饮，原来叫餐厅
    if (res.data.ctxs_tb) {
      let ctxs_tbzzl = ((res.data.ctxs_by - res.data.ctxs_tb) / res.data.ctxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.cy = ctxs_tbzzl >= 0 ? "+" + ctxs_tbzzl + "%" : ctxs_tbzzl + "%"
    }
    
    //客房
    if (res.data.kfxs_tb) {
      let kfxs_tbzzl = ((res.data.kfxs_by - res.data.kfxs_tb) / res.data.kfxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.kf = kfxs_tbzzl >= 0 ? "+" + kfxs_tbzzl + "%" : kfxs_tbzzl + "%"
    }
    
    //物业
    if (res.data.wyxs_tb) {
      let wyshxs_tbzzl = ((res.data.wyxs_by - res.data.wyxs_tb) / res.data.wyxs_tb * 100).toFixed(2)
      state.xsxx.tongbi.wysh = wyshxs_tbzzl >= 0 ? "+" + wyshxs_tbzzl + "%" : wyshxs_tbzzl + "%"
    }
  }
}

/**
 * 获取今日车客流信息
 */
async function getLeft1Data() {
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getJrCklxxZhkb', params)
  if (res.data) {
    state.jrcklxx.zcl = res.data.cl_jt ?? 0
    state.jrcklxx.zrcl = res.data.cl_zt ?? 0
    state.jrcklxx.tbzzl = res.data.cl_tbzzl ?? 0
  }
  ckl1OpChart.setOption(ckl1Op.value)
  ckl2OpChart.setOption(ckl2Op.value)
}

/**
 * 获取年度水电费信息,换了位置
 */
async function getLeft2Data() {
  ndsdfyData1.value = []
  ndsdfyData2.value = []
  ndsdfyData3.value = []
  ndsdfyData4.value = []
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getNdsdfxxZhkb', params)
  if (res.data) {
    res.data.forEach(item => {
      if (item.flprjexp == "水费") {
        if (item.type == "thisyear") {
          ndsdfyData1.value[parseInt(item.month) - 1] = item.cnt ?? 0;
        } else {
          ndsdfyData3.value[parseInt(item.month) - 1] = item.cnt ?? 0;
        }
      } else if (item.flprjexp == "电费") {
        if (item.type == "thisyear") {
          ndsdfyData2.value[parseInt(item.month) - 1] = item.cnt ?? 0;
        } else {
          ndsdfyData4.value[parseInt(item.month) - 1] = item.cnt ?? 0;
        }
      }
    });
  }
  ndsdfyOp.value.series[0].data = ndsdfyData1.value
  ndsdfyOp.value.series[1].data = ndsdfyData2.value
  ndsdfyOp.value.series[2].data = ndsdfyData3.value
  ndsdfyOp.value.series[3].data = ndsdfyData4.value

  // ndsdfyOp.value.series[0].data = ndsdfyData1.value
  // ndsdfyOp.value.series[1].data = ndsdfyData1.value
  // ndsdfyOp.value.series[2].data = ndsdfyData2.value
  // ndsdfyOp.value.series[3].data = ndsdfyData2.value

  // ndsdfyOp.value.series[4].data = ndsdfyData3.value
  // ndsdfyOp.value.series[5].data = ndsdfyData3.value
  // ndsdfyOp.value.series[6].data = ndsdfyData4.value
  // ndsdfyOp.value.series[7].data = ndsdfyData4.value
  ndsdfyOpChart.setOption(ndsdfyOp.value)
}

/**
 * 获取业态销售
 */
async function getLeft3Data() {
  ytxsqs_y.value = []
  const params = {
    modetype: ytxsqs_modetype.value,
    type: ytxsqs_modetype_child.value,
    validatecode: dmyType.value,
    compid: curServer.value[1],
    areacode: areacode.value
  }
  if (dmyType.value == "year") {
    const res = await ajaxRequest('post', 'getYtxsqsZhkb', params)
    if (res.data) {
      res.data.forEach(item => {
        ytxsqs_y.value[parseInt(item.month) - 1] = (item.taxsaleamnt / 10000).toFixed(2);
      });
    }
    ytxsqs_x.value = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
    ytxsqsOpt.value.xAxis[0].axisLabel.interval = 0
    ytxsqsOpt.value.xAxis[0].data = ytxsqs_x.value
    ytxsqsOpt.value.series[0].data = ytxsqs_y.value
    ytxsqsOptChart.setOption(ytxsqsOpt.value)
  }
  else {
    const res = await ajaxRequest('post', 'getYtxsqsExZhkb', params)
    if (res.data) {
      res.data.forEach(item => {
        ytxsqs_y.value[parseInt(item.sj) - 1] = (item.taxsaleamnt / 10000).toFixed(2);
      });
    }
    ytxsqs_x.value = ["01日","02日","03日","04日","05日","06日","07日","08日","09日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日","31日"]
    ytxsqsOpt.value.xAxis[0].axisLabel.interval = 2
    ytxsqsOpt.value.xAxis[0].data = ytxsqs_x.value
    ytxsqsOpt.value.series[0].data = ytxsqs_y.value
    ytxsqsOptChart.setOption(ytxsqsOpt.value)
  }
}

/**
 * 今日服务质量跟踪
 */
async function getRigth1Data() {
  ywcValue.value = 0
  hegeValue.value = 0
  buhegeValue.value = 0
  weiwcValue.value = 0
  zrwValue.value = 0
  wzgValue2.value = 0
  yzgValue2.value = 0
  buhegeValue2.value = 0
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getFwzlgzZhkb', params)
  if (res.data) {
    //已完成
    ywcValue.value = res.data.ywc
    //合格
    hegeValue.value = res.data.hg
    //不合格
    buhegeValue.value = res.data.bhg
    //未完成
    weiwcValue.value = res.data.wwc
    //总任务
    zrwValue.value = hegeValue.value + buhegeValue.value + weiwcValue.value

    wzgValue2.value = res.data.wzg
    yzgValue2.value = res.data.yzg
    buhegeValue2.value = wzgValue2.value + yzgValue2.value
  }
  jrfwzlgzOp1Chart.setOption(getJrfwzlgzOp1())
  jrfwzlgzOp2Chart.setOption(getJrfwzlgzOp2())
}


/**
 * 年度车客流
 */
async function getRigth2Data() {
  ndckl_y_1.value = []
  ndckl_y_2.value = []
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getNdcklZhkb', params)
  if (res.data && res.data.cl) {
    res.data.cl.forEach((item) => {
      let cheliu = (item.cl / 10000).toFixed(2)
      ndckl_y_1.value[parseInt(item.month) - 1] = cheliu;
      ndckl_y_2.value[parseInt(item.month) - 1] = (cheliu*3).toFixed(2);
    })
  }
  // if (res.data && res.data.kl) {
  //   res.data.kl.forEach((item) => {
  //     ndckl_y_2.value[parseInt(item.month) - 1] = (item.kl / 10000).toFixed(2);
  //   })
  // }
  ndcklOpt.value.series[0].data = ndckl_y_1.value;
  ndcklOpt.value.series[1].data = ndckl_y_2.value;
  ndcklOptChart.setOption(ndcklOpt.value)
}

/**
 * 年度费用
 */
async function getRigth3Data() {
  ndfy_y.value = []
  ndfy_y_sn.value = []
  const params = {
    compid: curServer.value[1]
  }
  const res = await ajaxRequest('post', 'getNdjyfyZhkb', params)
  if (res.data) {
    res.data.ydhj.forEach((item) => {
      if (item.type == "thisyear") {
        ndfy_y.value[parseInt(item.month) - 1] = item.cnt;
      } else {
        ndfy_y_sn.value[parseInt(item.month) - 1] = item.cnt;
      }
    })
  }
  ndfyOpt.value.series[0].data = ndfy_y.value;
  ndfyOpt.value.series[1].data = ndfy_y_sn.value;
  ndfyOptChart.setOption(ndfyOpt.value)
}

/**
 * 客货比
 */
async function getKehuobi() {
  ndfy_y.value = []
  const params = {
    compid: curServer.value[1],
    validatecode: dmyType.value,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getKehuobiZhkb', params)
  if (res.data) {
    state.ratioData.kehuobi = res.data
  }

}

/**
 * 获取服务区档案信息
 */
async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length > 0) {
    result.data.forEach((item, index) => {
      selectOptions.value[0].children.push({ id: item.id, value: item.id, label: item.compname })
    })
  }
}

/****************************地图相关代码start************************************* */
/**初始化地图数据**/
const mapData = ref({
  showLabel: false,
  data: [
  {
    title: "滦州服务区（南北区）",
    lng: 118.413204,
    lag: 39.852281,
    item: 1134,
    symbol: mapTop3_10Icon,
    label: '空闲'
  }
  ]
})

async function initMap() {
  mapData.value.data = []
  const params = {
    validatecode: dmyType.value
  }
  const res = await ajaxRequest('post', 'getXsTopZhkb', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item, index) => {
      let symb = getSymb(index+1)
      mapData.value.data[index] = {
        compid: item.compid,
        title: item.compname,
        lng: item.longitude,
        lag: item.latitude,
        symbol: symb,
        label: "lab"
      };
    })
  }

};

const getSymb = function (num) {
  switch (num) {
    case 1:
      return top1
      break;
    case 2:
      return top2
      break;
    case 3:
      return top3
      break;
    case 4:
      return top4
      break;
    case 5:
      return top5
      break;
    case 6:
      return top6
      break;
    case 7:
      return top7
      break;
    case 8:
      return top8
      break;
    case 9:
      return top9
      break;
    case 10:
      return top10
      break;
    default:
      return mapOtherIcon
  }
}
//地图选中服务区
const parenHandler = function (item) {
  curServer.value = ['河北高速燕赵驿行集团有限公司', item.compid ?? null]
  //刷新数据
  refreshData()
}
/****************************地图相关代码end************************************* */
</script>
<style scoped>
.ckl {
  display: flex;
  width: 100%;

  .ckl-item {
    width: 50%;
    background: url("../assets/img/headquarters/车客流框.png") no-repeat center;
    padding-left: 5vh;
    padding-top: 5.8vh;

    .ckl-flex-between {
      padding-left: 1vh;
      display: flex;

      .ckl-title {
        padding-right: 1vh;

        .ckl-title-p1 {
          font-size: 1.6vh;
          padding-bottom: 0.5vh;
          padding-top: 1vh;
        }

        .ckl-title-p2 {
          color: #00EAFF;
        }
      }
    }
  }

  .ckl-bottom {
    display: flex;
    margin-top: 1.6vh;
    font-size: 1.4vh;
    padding-left: 1vh;

    .ckl-bottom-value {
      color: #00EAFF;
    }
  }
}
.yz-common-small-title2{
  right: 0;
  width: 100%;
}
.top3 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1vh;
  padding:0 2vh 0 0;
  .md-5{
    width: 12.5%;
  }
  .md-4{
    width: 10%;
  }
  .yz-common-title-nav {
    color: white;
    text-align: center;
    font-size: 1.4vh;
    position: relative;
    .rightLine{
      position: absolute;
      right: -4px;
    }
  }
  .yz-common-title-nav.selected{
    border-bottom: none;
  }
  .yz-common-title-nav.selected .nav-title{
    border-bottom: 2px solid #3DBDC8;
    padding-bottom: 2px;
  }
}

.minText {
  width: 60px;
  text-align: left;
}

.yz-cloumn-6 {
  flex-wrap: nowrap;
  width: 50%;
  margin-right: 0;
  margin-left: 0;
  font-size: 13px;
}

.yz-cloumn .flex_bwt_num {
  color: white;
}


.thb{
  border-top: 1px solid #044455;
  font-size: 1vh;
  margin: 10px 4px;
  padding: 10px 0;
  .thb-tb{
    display: flex;
    color: #ff0000;
    padding-bottom: 6px;
  }
  .thb-hb{
    display: flex;
    color: #00ff00;
    padding-bottom: 6px;
  }
  .thb-w{
    color: #FFFFFF;
    width: 35px;
  }
}
.thb-header{
  padding-left: 12px;
}

.yz-box2-item{
  background: url("../assets/img/headquarters/xk.png") no-repeat;
  background-size: 100% 100%;
  border: none;
}

.yz-box2-item2{
  width: 25%;
  border: 2px solid rgba(0, 234, 255, 0.22);
  margin-right: 1vh;
  padding: 0.5vh;
  position: relative;
  border-radius: 1vh;
  text-align: center;
}

</style>
